import logo from './logo.svg'
import './App.css';
import Parent from './components/parent'
import ParentComponent from './components/pcmessage/parentComponent'
import Funcpar from './components/funcpc/funcPar';
const user = {
  firstName: 'Li',
  lastName: 'lei'
}
const element = <img src={logo} title='img' alt='img'/>
function formatName(user){
  return user.firstName + user.lastName
}
// 自动展开数组
const arr = [
  <li key="1">序列一</li>,
  <li key="2">序列二</li>,
  <li key="3">序列三</li>,
  <li key="5">序列四</li>
]
// 默认传入事件对象-事件
function click(e){
  console.log('click')
  console.log(e)
}
// 需要传参且需要传入事件对象
function click2(arg,e){
  console.log(arg,e)
}
// 使用bind传参，末尾自动传入事件对象，不用显性传入
function click3(arg,e){
  console.log(this)
  console.log(arg,e)
}
const persons = [
  {
    name: 'a',
    age: 20
  },
  {
    name: 'b',
    age: 30
  },
  {
    name: 'cb',
    age: 40
  }
]
function Grammar() {
  return (
    <div className="App">
      <Parent/>
      <br />
      <ParentComponent/>
      <hr />
      <Funcpar name="组件名称"/>
      <button onClick={click}>按钮-未传入事件对象</button>
      <button onClick={e=>click2('参数1',e)}>按钮-传参且需要传入事件对象</button>
      <button onClick={e=>click2('参数1',e)}>按钮-传参且需要传入事件对象</button>
      <button onClick={click3.bind(null,'click3')}>按钮-使用bind传参末尾自动传入事件对象</button>
      <h1 className='red'>{formatName(user)}</h1>
      {element}
      {arr}
      {1==='1'}
      {1===2}
      {}
      {persons.map(item=><li key={item.age}>{item.name}</li>)}
    </div>
  );
}

export default Grammar;
